<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view" style="overflow-y: scroll">
			<el-row :gutter="40">
				<el-col :span="8">
					<div class="title1">三轴数据</div>
					<div style="height: 200px">
						<div style="padding-left: 100px; font-size: 16px; display: flex; justify-content: space-around; margin-top: 20px">
							<span>X</span>
							<span>Y</span>
							<span>Z</span>
						</div>
						<div style="display: flex; font-size: 16px">
							<div style="display: inline-block; width: 30px; height: 30px"><img src="/@/assets/icon1.png" alt="" /></div>
							<div class="div_t1">
								<div style="display: inline-block; width: 13%">
									<span style="margin-left: 10px">加速度</span>
								</div>
								<div style="display: inline-block; width: 87%">
									<div style="display: flex; justify-content: space-around; width: 100%">
										<span>20.00</span>
										<span>21.00</span>
										<span>19.00</span>
									</div>
								</div>
							</div>
						</div>
						<div style="display: flex; font-size: 16px; margin-top: 10px">
							<div style="display: inline-block; width: 30px; height: 30px"><img src="/@/assets/icon2.png" alt="" /></div>
							<div class="div_t1">
								<div style="display: inline-block; width: 13%">
									<span style="margin-left: 10px">速度</span>
								</div>
								<div style="display: inline-block; width: 87%">
									<div style="display: flex; justify-content: space-around; width: 100%">
										<span>20.00</span>
										<span>21.00</span>
										<span>19.00</span>
									</div>
								</div>
							</div>
						</div>
						<div style="display: flex; font-size: 16px; margin-top: 10px">
							<div style="display: inline-block; width: 30px; height: 30px"><img src="/@/assets/icon3.png" alt="" /></div>
							<div class="div_t1">
								<div style="display: inline-block; width: 13%">
									<span style="margin-left: 10px">位移</span>
								</div>
								<div style="display: inline-block; width: 87%">
									<div style="display: flex; justify-content: space-around; width: 100%">
										<span>20.00</span>
										<span>21.00</span>
										<span>19.00</span>
									</div>
								</div>
							</div>
						</div>
						<div style="display: flex; font-size: 16px; margin-top: 10px">
							<div style="display: inline-block; width: 30px; height: 30px"><img src="/@/assets/icon4.png" alt="" /></div>
							<div class="div_t1">
								<div style="display: inline-block; width: 13%">
									<span style="margin-left: 10px">温度</span>
								</div>
								<div style="display: inline-block; width: 87%">
									<div style="display: flex; justify-content: space-around; width: 100%">
										<span>20.00</span>
										<span>21.00</span>
										<span>19.00</span>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="title1" style="margin-top: 10px">转速</div>
					<div style="width: 100%; height: 200px; margin-top: 20px">
						<div id="chart2"></div>
					</div>
					<div class="title1" style="margin-top: 10px">噪音</div>
					<div style="width: 100%; height: 200px; margin-top: 20px; display: flex; flex-direction: column; justify-content: space-around">
						<div style="display: flex; justify-content: space-between">
							<div style="font-size: 18px">XM7901B噪音</div>
							<div><span style="font-size: 18px">4000</span> <span>db</span></div>
						</div>
						<el-progress style="width: 100%" :percentage="10" :color="customColors" />
						<div style="display: flex; justify-content: space-between; margin-top: 20px">
							<div style="font-size: 18px">不锈钢噪音</div>
							<div><span style="font-size: 18px">1600</span> <span>db</span></div>
						</div>
						<el-progress style="width: 100%" :percentage="10" :color="customColors" />
					</div>
				</el-col>
				<el-col :span="8">
					<div class="title1">红外温度</div>
					<div style="height: 200px; margin-top: 20px">
						<el-row>
							<el-col :span="12">
								<div id="chart1"></div>
							</el-col>
							<el-col :span="12">
								<div
									style="
										width: 100%;
										height: 100%;
										display: flex;
										align-content: center;
										flex-direction: column;
										align-items: center;
										justify-content: center;
									"
								>
									<div><span style="font-size: 24px">75</span><span>℃</span></div>

									<div>
										<span style="margin-left: 10px; font-size: 16px">当前红外温度</span>
										<img src="/@/assets/bottom_bg.png" alt="" />
									</div>
								</div>
							</el-col>
						</el-row>
					</div>

					<div class="title1" style="margin-top: 10px">温度巡检（单位℃）</div>
					<div style="width: 100%; margin-top: 20px">
						<div style="display: flex; flex-direction: row; justify-content: space-between; height: 30px" v-for="item in 16" :key="item">
							<div style="width: 50px">探头{{ item }}</div>
							<el-progress style="width: 80%" :percentage="10" :color="customColors" />
							63.7
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="title1">三相交流电度功率</div>
					<div class="title2" style="margin-top: 20px">三相当前值</div>
					<div>
						<div style="font-size: 16px; display: flex; justify-content: space-around; margin-left: 20px">
							<div style="width: 25%; text-align: center"><span>属性</span></div>
							<div style="width: 25%; text-align: center"><span>A相当前值</span></div>
							<div style="width: 25%; text-align: center"><span>B相当前值</span></div>
							<div style="width: 25%; text-align: center"><span>C相当前值</span></div>
						</div>
						<div style="display: flex; font-size: 16px; margin-top: 10px" v-for="item in sanData" :key="item.id">
							<div class="div_t2">
								<div style="display: flex; flex-direction: row; justify-content: space-around; width: 25%; align-items: center">
									<div style="display: inline-block; width: 15%; margin-left: 10px"><img src="/@/assets/icon6.png" alt="" /></div>
									<div style="display: inline-block; width: 70%; text-align: center">
										<span>{{ item.name }}</span>
									</div>
									<div style="display: inline-block; width: 15%"><img src="/@/assets/icon5.png" alt="" /></div>
								</div>
								<div style="width: 25%; text-align: center">
									<span>{{ item.a }}</span>
								</div>
								<div style="width: 25%; text-align: center">
									<span>{{ item.b }}</span>
								</div>
								<div style="width: 25%; text-align: center">
									<span>{{ item.c }}</span>
								</div>
							</div>
						</div>
					</div>
					<div class="title2" style="margin-top: 20px">线电压值</div>
					<div>
						<div style="font-size: 16px; display: flex; justify-content: space-around; margin-left: 20px">
							<div style="width: 25%; text-align: center"><span>属性</span></div>
							<div style="width: 25%; text-align: center"><span>Uab</span></div>
							<div style="width: 25%; text-align: center"><span>Ubc</span></div>
							<div style="width: 25%; text-align: center"><span>Uca</span></div>
						</div>
						<div style="display: flex; font-size: 16px; margin-top: 10px">
							<div class="div_t2">
								<div style="display: flex; flex-direction: row; justify-content: space-around; width: 25%; align-items: center">
									<div style="display: inline-block; width: 15%; margin-left: 10px"><img src="/@/assets/icon6.png" alt="" /></div>
									<div style="display: inline-block; width: 70%; text-align: center">
										<span>线电压值</span>
									</div>
									<div style="display: inline-block; width: 15%"><img src="/@/assets/icon5.png" alt="" /></div>
								</div>
								<div style="width: 25%; text-align: center">
									<span>0.13</span>
								</div>
								<div style="width: 25%; text-align: center">
									<span>0.17</span>
								</div>
								<div style="width: 25%; text-align: center">
									<span>0.29</span>
								</div>
							</div>
						</div>
					</div>
					<div class="title2" style="margin-top: 20px">三相总值</div>
					<div style="display: flex; flex-wrap: wrap; margin-top: 10px">
						<div
							style="
								width: 22%;
								height: 60px;
								margin-top: 10px;
								margin-left: 10px;
								background-color: #f5f7f9;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
							"
							v-for="item in zongData"
							:key="item.id"
						>
							<div style="font-size: 16px">{{ item.name }}</div>
							<el-divider style="margin: 3px 0" />
							<div style="font-size: 16px">{{ item.value }}</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row style="margin-top: 20px">
				<el-col :span="24">
					<div class="title3">电压谐波</div>
					<div id="chart3"></div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<div class="title3">电流谐波</div>
					<div id="chart4"></div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup>
import echarts from '/@/utils/chart';

let myChart = null;
const initChart1 = () => {
	//检测是否已经存在echarts实例，如果不存在，则不再去初始化
	myChart = echarts.getInstanceByDom(document.getElementById('chart1'));
	//如果为空 则正常进行渲染 反之 不再进行初始化
	if (myChart == null) {
		myChart = echarts.init(document.getElementById('chart1'));
	} else {
		myChart.clear();
	}
	myChart.setOption({
		series: [
			{
				type: 'gauge',
				axisLine: {
					show: true,
					lineStyle: {
						width: 10,
					},
				},
				pointer: {
					show: true,
				},
				axisLabel: {
					distance: 1,
				},
				splitLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				progress: {
					show: true,
				},
				detail: {
					valueAnimation: true,
					formatter: '{value}',
				},
				data: [
					{
						value: 75,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
								{ offset: 0, color: '#07fe68' },
								{ offset: 1, color: '#ec7809' },
							]),
						},
					},
				],
			},
		],
	});
};
const initChart2 = () => {
	//检测是否已经存在echarts实例，如果不存在，则不再去初始化
	myChart = echarts.getInstanceByDom(document.getElementById('chart2'));
	//如果为空 则正常进行渲染 反之 不再进行初始化
	if (myChart == null) {
		myChart = echarts.init(document.getElementById('chart2'));
	} else {
		myChart.clear();
	}
	myChart.setOption({
		series: [
			{
				type: 'gauge',
				axisLine: {
					show: true,
					lineStyle: {
						width: 10,
					},
				},
				pointer: {
					show: true,
				},
				axisLabel: {
					distance: 1,
				},
				splitLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				progress: {
					show: true,
				},
				detail: {
					valueAnimation: true,
					formatter: '{value}',
				},
				data: [
					{
						value: 75,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
								{ offset: 0, color: '#07fe68' },
								{ offset: 1, color: '#ec7809' },
							]),
						},
					},
				],
			},
		],
	});
};
const initChart3 = () => {
	//检测是否已经存在echarts实例，如果不存在，则不再去初始化
	myChart = echarts.getInstanceByDom(document.getElementById('chart3'));
	//如果为空 则正常进行渲染 反之 不再进行初始化
	if (myChart == null) {
		myChart = echarts.init(document.getElementById('chart3'));
	} else {
		myChart.clear();
	}
	myChart.setOption({
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
		},
		legend: {},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true,
		},
		xAxis: [
			{
				type: 'category',
				data: [
					'1',
					'2',
					'3',
					'4',
					'5',
					'6',
					'7',
					'8',
					'9',
					'10',
					'11',
					'12',
					'13',
					'14',
					'15',
					'16',
					'17',
					'18',
					'19',
					'20',
					'21',
					'22',
					'23',
					'24',
					'25',
					'26',
					'27',
					'28',
					'29',
					'30',
				],
			},
		],
		yAxis: [
			{
				type: 'value',
			},
		],
		series: [
			{
				name: 'A相电压',
				type: 'bar',
				emphasis: {
					focus: 'series',
				},
				data: [
					320, 332, 301, 334, 390, 320, 332, 301, 334, 390, 320, 332, 301, 334, 390, 320, 332, 301, 334, 390, 320, 332, 301, 334, 390, 320, 332, 301,
					334, 390, 320, 332, 301, 334, 390,
				],
			},
			{
				name: 'B相电压',
				type: 'bar',
				emphasis: {
					focus: 'series',
				},
				data: [
					120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 120, 132, 101, 134,
					90, 120, 132, 101, 134, 90,
				],
			},
			{
				name: 'C相电压',
				type: 'bar',
				emphasis: {
					focus: 'series',
				},
				data: [
					220, 182, 191, 234, 290, 120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 120, 132, 101, 134,
					90, 120, 132, 101, 134, 90,
				],
			},
		],
	});
};
const initChart4 = () => {
	//检测是否已经存在echarts实例，如果不存在，则不再去初始化
	myChart = echarts.getInstanceByDom(document.getElementById('chart4'));
	//如果为空 则正常进行渲染 反之 不再进行初始化
	if (myChart == null) {
		myChart = echarts.init(document.getElementById('chart4'));
	} else {
		myChart.clear();
	}
	myChart.setOption({
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
		},
		legend: {},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true,
		},
		xAxis: [
			{
				type: 'category',
				data: [
					'1',
					'2',
					'3',
					'4',
					'5',
					'6',
					'7',
					'8',
					'9',
					'10',
					'11',
					'12',
					'13',
					'14',
					'15',
					'16',
					'17',
					'18',
					'19',
					'20',
					'21',
					'22',
					'23',
					'24',
					'25',
					'26',
					'27',
					'28',
					'29',
					'30',
				],
			},
		],
		yAxis: [
			{
				type: 'value',
			},
		],
		series: [
			{
				name: 'A相电流',
				type: 'bar',
				emphasis: {
					focus: 'series',
				},
				data: [
					320, 332, 301, 334, 390, 320, 332, 301, 334, 390, 320, 332, 301, 334, 390, 320, 332, 301, 334, 390, 320, 332, 301, 334, 390, 320, 332, 301,
					334, 390, 320, 332, 301, 334, 390,
				],
			},
			{
				name: 'B相电流',
				type: 'bar',
				emphasis: {
					focus: 'series',
				},
				data: [
					120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 120, 132, 101, 134,
					90, 120, 132, 101, 134, 90,
				],
			},
			{
				name: 'C相电流',
				type: 'bar',
				emphasis: {
					focus: 'series',
				},
				data: [
					220, 182, 191, 234, 290, 120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 120, 132, 101, 134,
					90, 120, 132, 101, 134, 90,
				],
			},
		],
	});
};
const sanData = ref([
	{
		id: 1,
		name: '电压',
		a: '20.00',
		b: '21.00',
		c: '19.00',
	},
	{
		id: 2,
		name: '电流',
		a: '20.00',
		b: '21.00',
		c: '19.00',
	},
	{
		id: 3,
		name: '有功功率',
		a: '20.00',
		b: '21.00',
		c: '19.00',
	},
	{
		id: 4,
		name: '无功功率',
		a: '20.00',
		b: '21.00',
		c: '19.00',
	},
	{
		id: 5,
		name: '视在功率',
		a: '20.00',
		b: '21.00',
		c: '19.00',
	},
	{
		id: 6,
		name: '功率因素',
		a: '20.00',
		b: '21.00',
		c: '19.00',
	},
	{
		id: 7,
		name: '有功电度',
		a: '20.00',
		b: '21.00',
		c: '19.00',
	},
	{
		id: 8,
		name: '无功电度',
		a: '20.00',
		b: '21.00',
		c: '19.00',
	},
	{
		id: 9,
		name: '视在电度',
		a: '20.00',
		b: '21.00',
		c: '19.00',
	},
	{
		id: 10,
		name: '输入频率',
		a: '20.00',
		b: '21.00',
		c: '19.00',
	},
]);
const zongData = ref([
	{
		id: 1,
		name: '总有功功率',
		value: '20.00',
	},
	{
		id: 2,
		name: '总无功功率',
		value: '21.00',
	},
	{
		id: 3,
		name: '总功率因素',
		value: '19.00',
	},
	{
		id: 4,
		name: '总视在功率',
		value: '20.00',
	},
	{
		id: 5,
		name: '总有功电能',
		value: '21.00',
	},
	{
		id: 6,
		name: '总无功电能',
		value: '19.00',
	},
	{
		id: 7,
		name: '总电度',
		value: '20.00',
	},
]);
const customColors = ['#07fe68'];
onMounted(() => {
	initChart1();
	initChart2();
	initChart3();
	initChart4();
});
</script>
<style lang="scss" scoped>
.title1 {
	background: url('/@/assets/title1_bg.png') no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 35px;
	line-height: 35px;
	font-size: 18px;
	font-weight: 500;
	padding-left: 20px;
}
.title2 {
	background: url('/@/assets/title2_bg.png') no-repeat;
	width: 100%;
	height: 35px;
	line-height: 35px;
	font-size: 18px;
	font-weight: 500;
	padding-left: 10px;
}
.title3 {
	background: url('/@/assets/title3_bg.png') no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 35px;
	line-height: 35px;
	font-size: 18px;
	font-weight: 500;
	padding-left: 20px;
}
.div_t1 {
	width: 100%;
	height: 30px;
	line-height: 30px;
	display: inline-block;
	margin-left: 15px;
	border-left-width: 5px;
	border-left-color: #07fe68;
	background-color: #f5f7f9;
}
.div_t2 {
	width: 100%;
	height: 30px;
	line-height: 30px;
	display: flex;
	margin-left: 15px;
	background-color: #f5f7f9;
}
#chart1 {
	width: 100%;
	height: 200px;
	display: inline-block;
}
#chart2 {
	width: 100%;
	height: 200px;
}
#chart3 {
	width: 100%;
	height: 300px;
}
#chart4 {
	width: 100%;
	height: 300px;
}
</style>
